import { useEffect } from 'react'
import copy from 'copy-to-clipboard'
import { Card, message, Popover, Tag } from 'antd'
import Icon from '@ant-design/icons'
import { CopyOutlined } from '@ant-design/icons'

import { VCenterEmpty } from '@/components/VCenterEmpty'
import { useBoundStore } from './store'
import { useCustomerInfo } from './useCustomerInfo'
import userCardIcon from '@/assets/icons/userCard.svg?react'
import styles from './styles.module.less'

/** 客户信息 */
export const CustomerInfo = () => {
  useCustomerInfo() // 放最顶部

  const loading = useBoundStore(v => v.loading)
  const data = useBoundStore(v => v.data)

  // 清理
  useEffect(() => () => useBoundStore.setState(useBoundStore.getInitialState(), true), [])

  return (
    <Card className={styles.card} title="客户信息" loading={loading}>
      {!data ? (
        VCenterEmpty.render()
      ) : (
        <div className={styles.box}>
          <div className={styles.logistics}>
            <div className={styles.logistics_icon}>
              {data?.logo ? <img src={data?.logo} /> : <>{data.enterpriseName?.[0]}</>}
            </div>
            <div className={styles.logistics_text}>
              <div>{data.enterpriseName}</div>
            </div>
          </div>
          <div className={styles.contain}>
            <div className={styles.item}>
              <span className={styles.label}>联系人:</span>
              <span>{data.associates}</span>
              <Popover
                overlayInnerStyle={{ width: '515px', maxHeight: '288px', overflowY: 'auto' }}
                content={
                  <div className={styles.tips}>
                    <div className={styles.title}>联系人</div>
                    {(data?.associatesList || []).map((item, index) => {
                      return (
                        <div key={index} className={styles.userItem}>
                          <div className={styles.icon}>
                            {data?.logo ? <img src={data?.logo} /> : <>{item.name?.[0]}</>}
                          </div>
                          <div className={styles.userInfo}>
                            <div className={styles.top}>
                              {item.name} {item.name === data.associates && <Tag color="blue">当前</Tag>}
                            </div>
                            <div className={styles.bottom}>
                              <div>
                                <span>联系电话:</span>
                                {item.phone}
                              </div>
                              <div>
                                <span>邮箱:</span>
                                {item.email}
                                <CopyOutlined
                                  className={styles.copyIcon}
                                  onClick={() => {
                                    copy(item.email)
                                    message.success('复制成功', 1)
                                  }}
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                }
              >
                {data?.associatesList?.length > 0 && <Icon className={styles.icon} component={userCardIcon} />}
              </Popover>
            </div>
            <div className={styles.item}>
              <span className={styles.label}>邮箱:</span>
              <span>{data.email}</span>
            </div>
            <div className={styles.item}>
              <span className={styles.label}>联系电话:</span>
              <span>{data.phone}</span>
            </div>
            <div className={styles.item}>
              <span className={styles.label}>店铺授权:</span>
              {data.authorizationFlag ? (
                <Popover
                  overlayInnerStyle={{ width: '515px', maxHeight: '314px', overflowY: 'auto' }}
                  content={
                    <div className={styles.tips}>
                      <div className={styles.title}>店铺授权</div>
                      {(data?.authInfoList || []).map((item, index) => {
                        return (
                          <div key={index} className={styles.shopItem}>
                            <div className={styles.shopItem_top}>
                              <div className={styles.left}>
                                <span className={styles.shopName}>{item.shopName}</span>
                                <span>{item.countryCname}</span>
                                <span>{item.shopPlatform}</span>
                              </div>
                              <div className={styles.right}>
                                {item.authorizationFlag ? (
                                  <Tag color="blue">已授权</Tag>
                                ) : (
                                  <Tag color="gray">未授权</Tag>
                                )}
                              </div>
                            </div>
                            <div>
                              <a href={item.shopUrl}>{item.shopUrl}</a>
                            </div>
                            <div className={styles.bottom}>
                              <span className={styles.label}>负责人</span>
                              <span className={styles.labelValue}>{item.contacts}</span>
                            </div>
                            <div className={styles.bottom}>
                              <span className={styles.label}>授权账号</span>
                              <span className={styles.labelValue}>{item.account}</span>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  }
                >
                  <span className={styles.blue}>已授权</span>
                </Popover>
              ) : (
                <span>未授权</span>
              )}
            </div>
          </div>
        </div>
      )}
    </Card>
  )
}
